<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ相册</title>
    <style>
      :root {
    --primary-color: #00bcd4;
    --primary-dark: #0097a7;
    --background-color: #e0f7fa;
    --white: #ffffff;
    --gray-light: #e0e0e0e0;
    --gray: #666;
    --gray-dark: #333;
    --shadow: 0 2px 4px rgba(0,0,0,0.1);
    --transition: all 0.3s ease;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--gray-dark);
    line-height: 1.6;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    background-color: var(--white);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 10;
}

.header button, 
.but,
input[type="submit"],
input[type="button"] {
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: var(--transition);
    box-shadow: var(--shadow);
}

.header button:hover,
.but:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

.tab-bar {
    display: flex;
    border-bottom: 2px solid var(--gray-light);
    padding-bottom: 10px;
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-right: 5px;
}

.tab.active {
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.tab-content {
    display: none;
    padding: 20px;
    background-color: var(--white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.tab-content.active {
    display: block;
}

.album-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.album-item {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.album-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.album-cover {
    width: 100%;
    height: 160px;
    background-color: var(--gray-light);
    position: relative;
    overflow: hidden;
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.album-item:hover .album-cover img {
    transform: scale(1.05);
}

.album-title {
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

.album-actions {
    display: flex;
    justify-content: space-between;
    padding: 0 15px 15px;
}

.but {
    width: 70px;
    height: 36px;
    margin: 0;
    flex: 1;
    max-width: 80px;
}

.but + .but {
    margin-left: 10px;
}

.storage-info {
    padding: 15px 30px;
    color: var(--gray);
    font-size: 14px;
    background-color: var(--white);
    margin-top: auto;
}

.pud_none {
    width: 500px;
    max-width: 90%;
    height: auto;
    max-height: 90vh;
    background-color: rgba(255,255,255,0.98);
    position: fixed;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

input[type="text"] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

input[type="text"]:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,188,212,0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        padding: 15px;
    }
    
    .album-list {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        padding: 15px;
        gap: 15px;
    }
    
    .pud_none {
        width: 90%;
        padding: 20px;
    }
}
.select_none{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
}
.select_none_content{
    position: absolute;
    width: 1500px;
    height: 700px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.x{
    position: absolute;
    top: 20px;
    right: 50px;
    font-size: 24px;
    color: #ff0000;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #000000;
    border: 1px solid #ffffff;
    text-align: center;
    line-height: 50px;
}
.add_img{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #fff;
    background-color: var(--primary-color);
    border-radius: 8px;
    cursor: pointer;
}
.tab-bar {
    display: flex;
    border-bottom: 2px solid var(--gray-light);
    padding-bottom: 10px;
    justify-content: center;
    background-color: var(--white);
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-right: 5px;
    transition: color 0.3s;
}

.tab.active {
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

.tab-content {
    display: none;
    padding: 20px;
    background-color: var(--white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.tab-content.active {
    display: block;
}

.forum-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.forum-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border: 1px solid var(--gray-light);
    border-radius: 8px;
    transition: box-shadow 0.3s;
}

.forum-item:hover {
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.forum-user {
    font-weight: 600;
    margin-bottom: 10px;
}

.forum-content {
    text-align: center;
    font-size: 14px;
    color: var(--gray);
}

.forum-data_ta {
    font-size: 12px;
    color: var(--gray-light);
    margin-top: 5px;
}
.but_tb{
    width: 50px;
    height: 40px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    margin-left: 10px;
}
.box_right{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.reply_none {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.reply_none_box {
    display: none;
    position: fixed;
    width: 500px;
    height: auto;
    z-index: 200;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.button_erply_a, .button_erply_b {
    display: inline-block;
    margin: 10px 5px;
    padding: 10px 20px;
    background-color: #00bcd4;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.button_erply_a:hover, .button_erply_b:hover {
    background-color: #0097a7;
}

#reply_content {
    position: relative;
    z-index: 100000;
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

#reply_content:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,188,212,0.2);
}
    </style>
</head>
<body>
    <div class="header">
        <div>
            上传照片/视频:<input type="file" id="files" multiple>
            <br>
            标题:<input type="text" style="background-color: #7ee1ff; border:1px solid black" id="nameInput">
            <br>
            <button id="createAlbumBtn">创建相册</button>
        </div>
        <div class="box_right">
            <p>
                <input type="text" id="add_app" placeholder="贴吧内容">
                <button onclick="add_app()">发送</button>
            </p>
        </div>
    </div>

    <div class="tab-bar">
        <div class="tab active" onclick="showTab('album')">相册</div>
        <div class="tab" onclick="showTab('forum')">贴吧</div>
    </div>

    <div id="album" class="tab-content active">
        <div class="album-list"></div>
    </div>

    <div id="forum" class="tab-content">
        <div class="reply_none_box"></div>
        <div class="reply_none">
            <input type="text" id="reply_content_a" placeholder="回复内容" style="width: 100%;">
            <button class="button_erply_a">发送回复</button>
            <button class="button_erply_b" onclick="closeReply()">关闭回复</button>
        </div>
        <div class="forum-list"></div>
    </div>

    <div class="pud_none">
        <div class="x" onclick="closePud()">×</div>
        <h2>修改相册</h2>
        <div>新标题：<input type="text" id="nameInput_a"></div>
        <div>新照片：<input type="file" id="files_a" multiple></div>
        <div>
            <button id="pud">保存修改</button>
            <button onclick="closePud()">取消</button>
        </div>
    </div>

    <div class="select_none">
        <div class="select_none_content">
            <div class="x" onclick="closeSelectNone()">×</div>
            <h2>相册详情</h2>
            <div class="select_time"></div>
            <div>
                <input type="file" id="addPhotoInput" multiple>
                <button class="but" onclick="addPhoto()">添加照片</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <script>
        let currentAlbumId;

        function apply() {
            $.ajax({
                type: 'get',
                url: 'http://localhost:3000/users/add_list',
                dataType: 'json',
                success: function(data) {
                    console.log(data);
                    $('.album-list').html('');
                    data.data.forEach(item => {
                        $('.album-list').append(`
                            <div class="album-item" data-id="${item.id}">
                                <div class="album-cover"><img src="${item.cover}" alt=""></div>
                                <div class="album-title">${item.title}</div>
                                <div class="album-actions">
                                    <button class="but" onclick="del(${item.id})">删除</button>
                                    <button class="but" onclick="pud(${item.id})">修改</button>
                                </div>
                            </div>
                        `);
                    });
                },
                error: function(err) {
                    console.error('获取相册列表失败:', err);
                    alert('获取相册列表失败，请稍后再试。');
                }
            });
        }
        apply();

        $('#createAlbumBtn').click(function() {
            const inp = $('#nameInput').val();
            const files = $('#files')[0].files;

            if (files.length === 0) {
                alert("请选择文件！");
                return; 
            }

            const formData = new FormData();
            formData.append('name', inp);
            for (let file of files) {
                formData.append('file', file);
            }

            $.ajax({
                url: 'http://localhost:3000/users/add_album',
                type: 'post',
                data: formData,
                dataType: "json",
                contentType: false,
                processData: false,
                success: function(data) {
                    console.log(data);
                    apply();
                },
                error: function(err) {
                    console.error('创建相册失败:', err);
                    alert('创建相册失败，请稍后再试。');
                }
            });
        });

        function del(id) {
            $.ajax({
                url: 'http://localhost:3000/users/del_album',
                type: 'post',
                data: { id },
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    apply();
                },
                error: function(err) {
                    console.error('删除相册失败:', err);
                    alert('删除相册失败，请稍后再试。');
                }
            });
        }

        function pud(id) {
            $(".pud_none").show();
            currentAlbumId = id;
        }

        $('#pud').click(function() {
            const inp = $('#nameInput_a').val();
            const files = $('#files_a')[0].files;

            if (files.length === 0) {
                alert("请选择文件！");
                return; 
            }

            const formData = new FormData();
            formData.append('name', inp);
            formData.append('id', currentAlbumId);
            for (let file of files) {
                formData.append('file', file);
            }

            $.ajax({
                url: 'http://localhost:3000/users/pud_album',
                type: 'post',
                data: formData,
                dataType: "json",
                contentType: false,
                processData: false,
                success: function(data) {
                    console.log(data);
                    $(".pud_none").hide();
                    $(`.album-item[data-id="${currentAlbumId}"] .album-title`).text(inp);
                    apply();
                },
                error: function(err) {
                    console.error('保存修改失败:', err);
                    alert('保存修改失败，请稍后再试。');
                }
            });
        });

        function closePud() {
            $(".pud_none").hide();
        }

        function closeSelectNone() {
            $('.select_none').hide();
        }

        function showImagesForAlbum(albumId) {
            $.ajax({
                url: 'http://localhost:3000/users/sel_album',
                type: 'post',
                data: { id: albumId },
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    $('.select_time').html('');
                    data.data.forEach(item => {
                        if (item.pid === albumId) {
                            $('.select_time').append(`
                                <img src="${item.img}" alt="" style="width: 200px; height: auto;">
                                <button class="but" onclick="del_img(${item.id})">删除</button>
                           `);
                        }
                    });
                },
                error: function(err) {
                    console.error('获取相册图片失败:', err);
                    alert('获取相册图片失败，请稍后再试。');
                }
            });
        }

        $(document).ready(function() {
            $(".album-list").on("click", "img", function(event) {
                $('.select_none').show();
                currentAlbumId = $(this).closest(".album-item").data("id");
                console.log("id", currentAlbumId);
                showImagesForAlbum(currentAlbumId);
            });
        });

        function del_img(id) {
            $.ajax({
                url: 'http://localhost:3000/users/del_img',
                type: 'post',
                data: { id },
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    showImagesForAlbum(currentAlbumId);
                },
                error: function(err) {
                    console.error('删除图片失败:', err);
                    alert('删除图片失败，请稍后再试。');
                }
            });
        }

        function addPhoto() {
            const files = $('#addPhotoInput')[0].files;

            if (files.length === 0) {
                alert("请选择文件！");
                return;
            }

            const formData = new FormData();
            formData.append('id', currentAlbumId);
            for (let file of files) {
                formData.append('file', file);
            }

            $.ajax({
                url: 'http://localhost:3000/users/add_img',
                type: 'post',
                data: formData,
                dataType: "json",
                contentType: false,
                processData: false,
                success: function(data) {
                    console.log(data);
                    showImagesForAlbum(currentAlbumId);
                },
                error: function(err) {
                    console.error('添加图片失败:', err);
                    alert('添加图片失败，请稍后再试。');
                }
            });
        }

        function showTab(tabId) {
            $('.tab-content').removeClass('active').hide();
            $('.tab').removeClass('active');
            $('#' + tabId).addClass('active').show();
            $('.tab-bar .tab').each(function() {
                if ($(this).attr('onclick') === `showTab('${tabId}')`) {
                    $(this).addClass('active');
                }
            });
        }

        function add_apply() {
            $.ajax({
                url: 'http://localhost:3000/users/get_app',
                type: 'get',
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    $('.forum-list').html('');
                    const user = localStorage.getItem("user");
                    data.data.forEach(item => {
                        $('.forum-list').append(`
                            <div class="forum-item">
                                <div class="forum-user">名称：${user}</div>
                                <div class="forum-content">内容：${item.content}</div>
                                <div class="forum-data_ta">时间：${item.data_ta}</div>
                                <button class="but_tb" onclick="del_app(${item.id})">删除</button>
                                <button class="but_tb" onclick="reply_app(${item.id})">回复</button>
                            </div>
                        `);
                    });
                },
                error: function(err) {
                    console.error('获取贴吧内容失败:', err);
                    alert('获取贴吧内容失败，请稍后再试。');
                }
            });
        }
        add_apply();

        function add_app() {
            const content = $('#add_app').val();
            console.log(content);

            $.ajax({
                url: 'http://localhost:3000/users/add_app',
                type: 'post',
                data: { content },
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    add_apply();
                    $('#add_app').val(''); // 清空输入框
                },
                error: function(err) {
                    console.error('发送贴吧内容失败:', err);
                    alert('发送贴吧内容失败，请稍后再试。');
                }
            });
        }

        function del_app(id) {
            $.ajax({
                url: 'http://localhost:3000/users/del_app',
                type: 'post',
                data: { id },
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    add_apply();
                },
                error: function(err) {
                    console.error('删除贴吧内容失败:', err);
                    alert('删除贴吧内容失败，请稍后再试。');
                }
            });
        }

        function reply_app(id) {
            currentAlbumId = id;
            $('.reply_none').show();
            $('.reply_none_box').show();

            $.ajax({
                url: 'http://localhost:3000/users/get_reply',
                type: 'get',
                data: { id },
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    $('.reply_none_box').html('');
                    data.data.forEach(item => {
                        if (item.pid === id) {
                            $('.reply_none_box').append(`
                                <h4 style="text-align: center;">回复给${localStorage.getItem("user")}</h4>
                                <textarea id="reply_content">${item.content}</textarea>
                           `);
                        }
                    });
                },
                error: function(err) {
                    console.error('获取回复内容失败:', err);
                    alert('获取回复内容失败，请稍后再试。');
                }
            });
        }

        function closeReply() {
            $('.reply_none').hide();
            $('.reply_none_box').hide();
        }

        $(document).ready(function() {
            $('.button_erply_a').click(function() {
                const reply_content = $('#reply_content_a').val();
                console.log(reply_content);

                $.ajax({
                    url: 'http://localhost:3000/users/add_reply',
                    type: 'post',
                    data: {
                        user: localStorage.getItem("user"),
                        content: reply_content,
                        pid: currentAlbumId,
                    },
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        add_apply();
                       document.querySelector('#reply_content_a').value = ''; // 清空输入框
                        closeReply();
                    },
                    error: function(err) {
                        console.error('发送回复失败:', err);
                        alert('发送回复失败，请稍后再试。');
                    }
                });
            });
        });
    </script>
</body>
</html>
